<template>
  <div class="login">
    <div class="right">
      <div class="signIn" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
        <div class="top">
          <h1 @click="n=1" :class="{active:n == 1}">登录 </h1>
          <span> /</span>
          <h1 @click="n=0" :class="{active:n == 0}">注册页面</h1>
        </div>
        <div class="denglu" v-show="n==1">
          <el-input placeholder="请输入手机号" maxlength="11" v-model="userInfo.phone" clearable>
          </el-input>
          <el-input placeholder="请输入密码" v-model="userInfo.password" show-password></el-input>
          <div class="checked"><input type="checkbox" v-model="agree">已阅读并同意账号用户协议和隐私政策</div>
          <button @click="loginHandler(userInfo)">登录</button>
        </div>
        <div class="denglu" v-show="n==0">
          <el-input placeholder="设置用户名" maxlength="12" v-model="registerInfo.name" clearable>
          </el-input>
          <el-input placeholder="请输入手机号" maxlength="11" v-model="registerInfo.phone" clearable>
          </el-input>
          <el-input placeholder="请输入密码" v-model="registerInfo.password" show-password></el-input>
          <div class="checked"><input type="checkbox" v-model="agree">已阅读并同意账号用户协议和隐私政策</div>
          <button @click="registerHandler(registerInfo)">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入请求登陆的接口
import { userLogin,userRegister } from "../assets/request.js";
import { mapActions } from "vuex"
export default {
  name: "Login",
  data() {
    return {
      input: '',
      loading: false,
      n: 1,
      agree: true,
      userInfo: {
        phone: "18339688751",
        password: "1234",
      },
      registerInfo: {
        name: '',
        phone: "",
        password: "",
      },
    }
  },
  mounted() {
    this.n = this.$route.params.n;

  },
  methods: {
    ...mapActions("user", ['login','register']),
    // ...mapActions("user", ['register']),
    async loginHandler(userInfo) {
      if (this.agree == false) {
        alert("未勾选用户协议")
      } else {
        try {
          // 我要发登录请求了
          this.loading = true
          let res = await userLogin(userInfo)
          console.log(res);
          // 设置用户名，设置登录名，设置token
          // 1.把用户名给vuex

          this.login(res.data.result.name)
          // token存起来
          sessionStorage.setItem("token", res.data.result.token)
          sessionStorage.setItem("userId", res.data.result.id)
          this.$message({
            message: '恭喜你，成功登录',
            type: 'success',
            duration: 800,
          });
          this.loading = false
        } catch (error) {
          this.loading = false
          this.$message({
            message: '登录失败，请检查手机号码和密码',
            type: 'warning',
            duration: 800,
          });
        }
      }
      // 去首页  
      this.$router.push({
        name: "index",
      })
    },
    async registerHandler(registerInfo) {
      if (this.agree == false) {
        alert("未勾选用户协议")
      } else {
        try {
          // 我要发注册请求了
          this.loading = true
          let res = await userRegister(registerInfo)
          console.log(res);
          // 设置用户名，设置登录名，设置token
          // 1.把用户名给vuex
          this.register(res.data.result.name)
          // token存起来
          sessionStorage.setItem("token", res.data.result.token)
          sessionStorage.setItem("userId", res.data.result.id)
          this.$message({
            message: '成功注册，请登录',
            type: 'success',
            duration: 800,
          });
          this.loading = false
        } catch (error) {
          this.loading = false
          this.$message({
            message: '注册失败，请重新检查',
            type: 'warning',
            duration: 800,
          });
        }
      }
      this.$router.push({
        name: "login",
        params: {
          n:1,
        }
      })
    }
    // 这样写登录失败时会一直转圈
    // async login(userInfo) {
    //   this.loading = true
    //   console.log("去登陆", userInfo);
    //   let res = await userLogin(userInfo);
    //   if (res.status == 200) {
    //     this.loading = false
    //     this.$message({
    //       message: '恭喜你，成功登录',
    //       type: 'success',
    //       duration: 800,
    //     });
    //   } else {
    //     this.loading = false
    //     this.$message({
    //       message: '登录失败，请检查手机号码和密码是否正确',
    //       type: 'warning',
    //       duration: 800,
    //     });
    //   }
    //   console.log(res);
    //   sessionStorage.setItem("token", res.data.result.token)
    // }
  },
}

</script>

<style lang='scss' scoped>
@function vw($w) {
  @return ($w/1349) * 100+vw;
}

.login {
  width: 100%;
  height: vw(750);
  background: url(../背景.webp) no-repeat 0 0/100% 100%;
  position: relative;

  .right {
    width: vw(450);
    height: vw(540);
    opacity: 0.8;
    background-color: rgb(37, 20, 75);
    position: absolute;
    left: vw(700);
    top: vw(100);

    .signIn {
      width: vw(250);
      height: vw(350);
      text-align: center;
      position: absolute;
      left: 50%;
      top: vw(80);
      transform: translateX(-50%);

      .top {
        color: rgb(189, 184, 184);
        // font-size: vw(24);
        display: flex;
        justify-content: center;

        .active {
          color: #df4f23;
        }

        span {
          font-size: vw(30);
          padding: 0 vw(4);
        }

        h1 {
          font-size: vw(24);
        }

      }


      .denglu {
        height: vw(260);
        margin-top: vw(60);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .checked {
          color: #AAA;
          font-size: vw(13);
          display: flex;

          input {
            width: vw(16);
            height: vw(16);
            margin-right: vw(6);
            cursor: pointer;
          }
        }

        button {
          width: vw(200);
          height: vw(40);
          margin: vw(10) 0 0 vw(20);
          text-align: center;
          font-size: vw(20);
          color: #fff;
          background-color: rgb(218, 130, 63);
          border: none;
          cursor: pointer;
          &:hover {
            background-color: rgb(245, 128, 18);
          }
        }
      }

    }
  }

}


</style>
